<template>
    <div style="margin-left: 120px;">
        <el-radio-group :model-value="selectedOption" @update:model-value="$emit('update:selectedOption', $event)">
            <div class="radio-container">
                <el-radio v-for="(option, index) in options" :key="index" :label="option.value">
                    {{ String.fromCharCode(65 + index) }}. {{ option.text }}
                </el-radio>
            </div>
        </el-radio-group>
        <el-button @click="$emit('addOption')">添加选项</el-button>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    options: Array,
    selectedOption: String,
});

const emit = defineEmits(['update:selectedOption', 'addOption']);
</script>
<style scoped>
.radio-container {
    display: flex;
    flex-direction: column;
    /* 这会让子元素沿着垂直方向分布 */
    gap: 8px;
    /* 添加一些间距以区分各个选项 */
}

.el-radio {
    margin-left: 0 !important;
    /* 移除默认的左边距 */
}

/* 增加文本域的高度 */
.el-input__inner {
    height: 200px;
}

.radio-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.el-radio {
    margin-left: 0 !important;
}
</style>